/** * author: sailing date: 2018/11/14 */

<template>
	<div @click="closePanel()" :style="{width: w}" class="containerLeft">
		<div class="shadow"></div>
		<div  class="leftNav">
			<div class="headerTop">左侧菜单</div>
			<mu-list v-for="el in leftBar" :key="el">
				<mu-list-item @click="btnleft(el)" button :ripple="true">
					<mu-list-item-title>{{ el.name }}</mu-list-item-title>
				</mu-list-item>
			</mu-list>
		</div>
	</div>
</template>

<script type="text/javascript">
import eventBus from "../server/eventBus.js";
import headback from "./page/headback.vue"
export default {
	data() {
		return {
			w: '0',
			leftBar: [
				{
					path: "/Srecord",
					name: "睡眠时间"
				},
				{
					path: "/aboutme",
					name: "设置"
				}
			]
		};
	},
	methods: {
		leftPanel() {
			this.w = '100%'
		},
		closePanel () {
			this.w = 0;
		},
		btnleft (el) {
			this.$router.push(el.path)
		}
	},
	mounted() {
		eventBus.$on("messageLeft", this.leftPanel);
	}
};
</script>

<style lang="less">
.containerLeft {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000;
	-webkit-transition: all 0.5s;
	.headerTop{
		background: #2196f3;
		line-height:56px;
		overflow:hidden;
		position:relative;
		top:0;
		color: #fff;
		font-size: 18px;
		height: 56px;
	}
	.shadow {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1000;
		opacity: 0.5;
		background: #ccc;
	}
	.leftNav {
		position: absolute;
		width: 80%;
		height: 100%;
		top: 0;
		left: 0;
		box-shadow: 1px 1px 1px #ccc;
		background: #fff;
		z-index: 2000;

		.mu-list {
			padding: 0px;
			border-bottom: 1px solid #ccc;
		}
		.item {
			height: 50px;
			line-height: 50px;
			text-align: left;
			margin-left: 10px;
			border-bottom: 1px solid #ccc;
		}
	}
}
</style>
